<template>
    <div class="TaskWarp" :class="{teachDivMain:BeginTeaching}">
        <div class="divMain FUHE" @click.stop>
            <div class="divTitle">
                <h2>{{Questions.child.QuestionRemark}}</h2>
            </div>
            <div class="tigan" v-html="FUHEtigan(Questions.child,Questions.child.stem)"></div>
            <div class="divContent" :style="{top:divContentTop}">
                <div class="touchMove" @touchstart="TOUCHMOVE" @mousedown="TOUCHMOVE">
                    下拉刷新显示
                </div>
                <div class="boxContent">
                    <swiper class="swiperCont" :options="swiperOption">
                        <div class="swiper-pagination" slot="pagination"></div>
                        <swiper-slide class="swiperItem" v-for="(item,index) in Questions.child.stem"
                                      v-if="isShowChild(Questions.child,item)" :key="item">
                            <div class="smallTtigan" v-html="item.StemContent"
                                 v-if="item.QuestionTypeCode != 'QUE0042' && item.QuestionTypeCode != 'QUE0140' && item.QuestionTypeCode != 'QUE0141'"></div>

                            <!--<div class="itemWarp">-->
                            <!--<div :style="itemLineHeight()" class="divItem" v-for="(opts,Index) in item.opts" :key="opts">-->
                            <!--{{opts.OptionNumber}}:-->
                            <!--<div class="DanXuanOpts" v-html="opts.OptionContent"></div>-->
                            <!--</div>-->
                            <!--</div>-->

                            <!--单选-->
                            <div class="itemWarp FH-DanXuan" v-if="item.QuestionTypeCode == 'QUE0020'">
                                <div :style="itemLineHeight()" class="divItem noSwipwe" v-for="(opts,Index) in item.opts"
                                     :key="opts">
                                    {{opts.OptionNumber}}:
                                    <div class="DanXuanOpts" v-html="opts.OptionContent"></div>
                                </div>
                            </div>
                            <!--多选-->
                            <div class="itemWarp FH-DuoXuan" v-if="item.QuestionTypeCode == 'QUE0037'">
                                <div :style="itemLineHeight()" class="divItem noSwipwe" v-for="(opts,Index) in item.opts"
                                     :key="opts">
                                    {{opts.OptionNumber}}:
                                    <div class="DanXuanOpts" v-html="opts.OptionContent"></div>
                                </div>
                            </div>
                            <!--归类-->

                            <div class="itemWarp FH-GUILEI" v-if="item.QuestionTypeCode == 'QUE0049'">

                                <!--选项-->
                                <ul class="options clearfix">
                                    <draggable class="draggableContent clearfix optionsDraggable"
                                               :options="{group:'people'}">
                                        <div style="display: inline-block" v-for="oo in item.opts">
                                            <div class="draggable noSwipwe" v-for="val in JSON.parse(oo.OptionContent)"
                                                 v-html="val.Content"></div>
                                        </div>
                                    </draggable>
                                </ul>

                                <!--答题框-->
                                <div class="continerWarp clearfix">
                                    <ul v-for="oo in item.opts" class="continer"
                                        :style="background(oo)">
                                        <li class="continerTitle">
                                            {{oo.OptionNumber}}
                                        </li>
                                        <draggable class="draggableContent clearfix continerDraggable"
                                                   :options="{group:'people'}">
                                        </draggable>
                                    </ul>
                                </div>

                            </div>


                            <!--主观-->
                            <div class="itemWarp FH-DanXuan" v-if="item.QuestionTypeCode == 'QUE0042'">
                                <div v-html="item.StemContent"></div>
                            </div>
                            <!--判断题-->
                            <div class="itemWarp FH-PanDuan" v-if="item.QuestionTypeCode == 'QUE0142'">
                                <div :style="itemLineHeight()" class="divItem noSwipwe" v-for="(opts,Index) in item.opts"
                                     :key="opts" style="position: relative">
                                    {{opts.OptionNumber}}:
                                    <img
                                            :src="opts.OptionContent == 'true'? 'dist/images/true.png' : 'dist/images/false.png'"
                                            alt=""
                                            style="height: 80%;padding-left: 20px;position: absolute;top: 0;bottom: 0;margin: auto">
                                </div>
                            </div>
                            <!--文字排序-->
                            <div class="itemWarp FH-WenZiPaiXu" v-if="item.QuestionTypeCode == 'QUE0138'">
                                <draggable>
                                    <div class="divItem noSwipwe" v-for="opts in item.opts">
                                        <span class="txtOptionsIndex">{{opts.ConnectNumber}}</span>{{opts.OptionContent}}</span>
                                    </div>
                                </draggable>
                            </div>
                            <!--图片排序-->
                            <div class="itemWarp FH-TuPianPaiXu" v-if="item.QuestionTypeCode == 'QUE0139'">
                                <div class="chooseList" style="height: 100%">
                                    <draggable class="picPaiXu">
                                        <div class="divItem noSwipwe" v-for="(opts,i) in item.opts">
                                            <div class="cont" v-html="opts.OptionContent"></div>
                                            <span class="OptionsIndex">{{i+1}}</span>
                                        </div>
                                    </draggable>
                                </div>
                            </div>
                            <!--连线题-->
                            <div class="itemWarp FH-LianXian"
                                 v-if="item.QuestionTypeCode == 'QUE0140' || item.QuestionTypeCode == 'QUE0141'">
                                <div class="LianXianWarp">
                                    <div class="show topBottom cb">
                                        <div class="showtop">
                                            <!--上侧-->
                                            <span v-for="(opts,I) in item.opts"
                                                  v-if="I%2 == 0" class="showitem noSwipwe" v-html="opts.OptionContent"></span>
                                        </div>
                                        <div class="showbottom">
                                            <!--下侧-->
                                            <span v-for="(opts,I) in item.opts"
                                                  v-if="I%2 == 1" class="showitem noSwipwe"
                                                  v-html="opts.OptionContent"></span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </swiper-slide>
                    </swiper>
                </div>
            </div>
        </div>
        <div class="Close" v-show="!BeginTeaching">
            <i class="el-icon el-icon-close"></i>
        </div>
        <transition enter-active-class="animated zoomIn">
            <bigImg :imgSrc="bigImgInfo" v-if="bigImgInfo.src != ''"></bigImg>
        </transition>
    </div>
</template>

<script>
    import {mapGetters, mapActions} from 'vuex'
    import draggable from 'vuedraggable'
    export default {
        name: "FUHE",
        props: ["Questions"],
        computed: {
            ...mapGetters([
                'divContentTop',
                'BeginTeaching'
            ])
        },
        methods: {
            background(item){
                var urlString = JSON.parse(item.OptionContent)[0]

                if (JSON.parse(item.OptionContent).length >= 0) {
                    if (urlString.src != '' || urlString.src != 'undefined') {
                        return 'background: #ccc url("' + picSrc + urlString.src + '") no-repeat;background-size: cover;'
                    }
                } else {
                    return 'background-color:red'
                }
            },
            ...mapActions([
                'TOUCHMOVE'
            ]),
            FUHEtigan(child, stem){
                for (let i = 0; i < stem.length; i++) {
                    if (stem[i].QuestionTypeCode == child.QuestionTypeCode) {
                        return stem[i].StemContent
                    }
                }
            },
            isShowChild(child, stem){
                if (stem.QuestionTypeCode == child.QuestionTypeCode) {
                    return false
                } else {
                    return true
                }
            },
            itemLineHeight(){
                return {
                    lineHeight: $('.divItem').height() + 'px'
                }
            }
        },
        components: {
            draggable,
        },
        mounted() {
            var _this = this;


            $('.FUHE img').each(function () {
                $(this).on('dblclick', function () {
                    _this.bigImgInfo.src = $(this).attr('src')
                })
                if ($(this).parents('.itemWarp').hasClass('FH-PanDuan')) {
                    return
                }
                $(this).upImgSrc()
            })

            $('.FUHE audio').each(function () {
                $(this).upAudioSrc()
            })

            $('.divContent').height(parseFloat($('.FUHE').height()) - 80)
            $('.tigan').height(parseFloat($('.FUHE').height()) - 80)
            $('.boxContent').height(parseFloat($('.divContent').height()) - 56)
            $('.divItem').css({
                lineHeight: $('.divItem').height() + 'px'
            })

            window.onresize = function () {
                $('.divContent').height(parseFloat($('.FUHE').height()) - 80)
                $('.tigan').height(parseFloat($('.FUHE').height()) - 80)
                $('.boxContent').height(parseFloat($('.divContent').height()) - 56)
                $('.divItem').css({
                    lineHeight: $('.divItem').height() + 'px'
                })
            }
        },
        data () {
            return {
                bigImgInfo: {
                    src: ''
                },
                swiperOption: {
                    // notNextTick是一个组件自有属性，如果notNextTick设置为true，组件则不会通过NextTick来实例化swiper，也就意味着你可以在第一时间获取到swiper对象，假如你需要刚加载遍使用获取swiper对象来做什么事，那么这个属性一定要是true
                    notNextTick: true,
                    // swiper configs 所有的配置同swiper官方api配置
                    pagination: '.swiper-pagination',
                    slidesPerView: 1,
                    paginationClickable: true,
                    spaceBetween: 30,
                    loop: true,
                    noSwiping: true,
                    noSwipingClass: 'noSwipwe'
                }
            }
        }
    }


</script>

<style lang="scss" rel="stylesheet/scss">
    .DanXuanOpts {
        display: inline;
        height: 100%;
        p {
            display: inline;
        }
        img {
            height: 100%;
        }
    }

    .smallTtigan {
        line-height: 60px;
        height: 60px;
        overflow: hidden;
    }

    .FUHE {
        .LianXianWarp {
            height: 100%;
            overflow: hidden;
            .show.topBottom {
                height: 100%;
                .showtop, .showbottom {
                    height: 50%;
                    overflow: hidden;
                    display: flex;
                    flex-wrap: nowrap;
                    justify-content: center;
                    .showitem {
                        background: #fff;
                        position: relative;
                        p {
                            height: 100%;
                        }
                        img {
                            height: 100%;
                            width: auto;
                            display: block;
                            left: 0;
                            right: 0;
                            position: absolute;
                            margin: 0 auto;
                        }
                    }
                }
                .showtop {
                    margin-top: 60px;
                }
            }
        }
        .FH-GUILEI {
            .options {
                height: 30%;
                overflow: scroll;
                background-color: #f8fafc;
                .draggableContent {
                    min-height: 100%;
                    min-width: 100%;
                    display: inline-block;
                    .draggable {
                        width: 100px;
                        height: 100px;
                        margin: 10px;
                        background: #fff;
                        border: 1px solid #000;
                        float: left;
                        p {
                            height: 100%;
                            width: 100%;
                            position: relative;
                            text-align: center;
                            font-size: 14px;
                            line-height: 20px;
                            img {
                                width: 80%;
                                height: 80%;
                                position: absolute;
                                left: 0;
                                right: 0;
                                top: 0;
                                bottom: 0;
                                margin: auto;
                            }
                        }
                    }
                }
            }
            .continerWarp {
                height: 70%;
                overflow: scroll;
                background-color: #f8fafc;
                .continer {
                    width: 28%;
                    margin: 1%;
                    height: 60%;
                    box-sizing: border-box;
                    background: #ccc;
                    float: left;
                    overflow: scroll;
                    .continerTitle {
                        text-align: center;
                        padding: 10px 0;
                        color: #FF7373;
                        font-size: 24px;
                        width: 80%;
                        margin: 0 auto;
                        border-bottom: 2px solid #FF7373;
                    }
                    .draggableContent {
                        min-height: 60%;
                        .draggable {
                            width: 100px;
                            height: 100px;
                            margin: 10px;
                            background: #fff;
                            border: 1px solid #000;
                            float: left;
                            p {
                                height: 100%;
                                width: 100%;
                                position: relative;
                                text-align: center;
                                font-size: 14px;
                                line-height: 20px;
                                img {
                                    width: 80%;
                                    height: 80%;
                                    position: absolute;
                                    left: 0;
                                    right: 0;
                                    top: 0;
                                    bottom: 0;
                                    margin: auto;
                                }
                            }
                        }
                    }
                }
            }
        }
    }

</style>
<style lang="scss" rel="stylesheet/scss" scoped>
    @import '../../../assets/css/public';

    .TaskWarp {
        height: 90%;
        width: 90%;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
        .divMain {
            position: absolute;
            overflow: hidden;
            height: 100%;
            width: 100%;
            .divTitle {
                height: 80px;
                background: #fff;
                position: relative;
                box-shadow: 0 10px 20px 2px rgba(197, 208, 218, 0.8);
                h2 {
                    font-size: 20px;
                    line-height: 80px;
                    color: #56545A;
                }
            }
            .tigan {
                font-size: 24px;
                background: #D4D7D9;
                line-height: 2em;
                min-height: 100%;
            }
            .divContent {
                background: #fff;
                position: absolute;
                top: 80px;
                left: 0;
                width: 100%;
                overflow: hidden;
                height: 100%;
                .touchMove {
                    margin: 0 auto;
                    width: 309px;
                    height: 56px;
                    font-size: 16px;
                    background: #81a4ff;
                    border-radius: 0 0 8px 8px;
                    line-height: 56px;
                    text-align: center;
                    color: #fff;
                    font-weight: bold;
                }
                .boxContent {
                    overflow: scroll;
                    .swiperCont {
                        height: 100%;
                        .swiperItem {
                            height: 100%;
                            .itemWarp {
                                height: 80%;
                                overflow: auto;
                                display: flex;
                                flex-direction: column;
                                .divItem {
                                    height: 14%;
                                    margin: 1em auto;
                                    width: 80%;
                                    padding: 0 54px;
                                    border-radius: 20px;
                                    box-shadow: 0 2px 8px 0 #c5d0da;
                                    background: #fff;
                                    font-size: 24px;
                                    font-weight: bold;
                                    position: relative;
                                    background: #fff;
                                    .txtOptionsIndex {
                                        position: absolute;
                                        width: 26px;
                                        height: 26px;
                                        border-radius: 50%;
                                        background: #007aff;
                                        line-height: 26px;
                                        font-size: 20px;
                                        text-align: center;
                                        color: #fff;
                                        top: 0px;
                                        left: 15px;
                                        bottom: 0px;
                                        margin: auto;
                                    }
                                }

                            }
                        }
                    }
                }
            }
            .current span {
                color: #666;
            }
        }
    }

</style>
